import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false
// 1.中引入VueRouter函数
import VueRouter from 'vue-router'
//2.添加到Vue.use()身上--注册全局RouterLink和RouterVirw组件
Vue.use(VueRouter)

// 3.1引入 find组件
import Find from './views/Find.vue'
import My from './views/My.vue'
import Part from './views/Part.vue'
// 引入 find组件中的子组件
import Recommend from './views/Second/Recommend.vue'
import Ranking from './views/Second/Ranking.vue'
import SongList from './views/Second/SongList.vue'

// 引入404 组件
import NotFound from './views/NotFound.vue'

// 3.创建路由规则
let routes = [
  {
    name: 'Find',
    // 重定向
    path: '/',
    redirect: '/find'
  },
  {
    path: '/find',
    component: Find,
    children: [
      // 一个对象表示一条子路由规则
      // 希望用户访问/find/Recommend
      {
        // 子路由中不要加 / 开头, 匹配的是一级路由拼接二级路由的效果

        path: 'recommend',
        component: Recommend
      },
      {
        path: 'ranking',
        component: Ranking
      },
      {
        path: 'songlist',
        component: SongList
      }
    ]
  },
  {
    name: 'My',
    path: '/my',
    component: My
  },
  {
    // 用来匹配 query 传参或无惨的情况
    path: '/part',
    component: Part
  },
  {
    name: 'Part',
    // 定义接搜的参数,动态路径参数
    //加了冒号name就是参数
    // 一定要加 : 号.否则就成了/part/name
    // name 最终会被放到 $route.params  中作为name属性传递给目标组建
    path: '/part/:name/:age',
    component: Part
  },
  {
    // 用来匹配 404
    path: '*',
    component: NotFound
  }
]

// 4.用规则生成路由对象
let router = new VueRouter({
  routes
})
new Vue({
  render: (h) => h(App),
  router
}).$mount('#app')
